<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport"
        content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"/>
  <title>%%TITLE%%</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" integrity="sha512-G0MeOmUp9cjHRfFbOhGN9zRb/65HN5DV1fi1Z5rIy3YWDy5XIEQTVtDrNlA8UtXDFE7/KOE7jr9KimXPTFG6HQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
  <link rel="shortcut icon" href="https://cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png"/>
  <script src="https://cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js" integrity="sha512-QNuOT8ABhMsC3MjG7c+Whp+HipQQKLM83lFqXg5kCzaQGf280UsPfj37FcY9YD44iaom/+OGUVO7BdqyMT362A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<style>
  body {
    background-color: rgb(23, 42, 58);
    font-family: Open Sans, sans-serif;
    height: 90vh;
  }

  #root {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loading {
    font-size: 32px;
    font-weight: 200;
    color: rgba(255, 255, 255, .6);
    margin-left: 20px;
  }

  img {
    width: 78px;
    height: 78px;
  }

  .title {
    font-weight: 400;
  }
</style>
<body>
<div id="root">
  <img src="https://cdn.jsdelivr.net/npm/graphql-playground-react/build/logo.png" alt=""/>
  <div class="loading"> Loading
    <span class="title">GraphQL Playground</span>
  </div>
</div>
<script>window.addEventListener("load", function (event) {
  GraphQLPlayground.init(document.getElementById("root"), {
    // options as "endpoint" belong here
    endpoint: "%%GRAPHQL_ROUTE%%"
  })
})</script>
</body>

</html>
